<template>
  <div>
    <PageWrapper contentBackground :contentFullHeight="true">
      <Row :gutter="24">
        <Col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
          <div style="overflow-y: scroll; overflow-x: hidden; height: 86vh">
            <BasicTree
              :treeData="depData"
              :toolbar="true"
              :search="true"
              @select="selectDep"
              :replaceFields="{ key: 'orgId', title: 'title', children: 'childrenOrg' }"
              :beforeRightClick="rightClick"
            />
          </div>
        </Col>
        <Col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
          <BasicTable @register="registerTable">
            <!-- 创建时间 -->
            <template #createTime="{ text: createTime }">
              <span>
                {{ proxy.$filters.filterTime(createTime) }}
              </span>
            </template>
            <!-- 个人印章 -->
            <template #sign="{ text: sign }">
              <span>
                {{
                  sign === ''
                    ? t('routes.table.departmentManagement.no')
                    : t('routes.table.departmentManagement.yes')
                }}
              </span>
            </template>
          </BasicTable>
        </Col>
      </Row>
    </PageWrapper>
    <DeptModal @register="registerModal" @success="handleSuccess" />
    <!-- 调整人员 -->
    <PersonAdjustModal @register="registerPersonAdjustModal" @success="reload" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, getCurrentInstance } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTree } from '/@/components/Tree/index';
  import { BasicTable, useTable } from '/@/components/Table';
  import {
    GetAllOrgTreeDataHaveCompany,
    GetOrgPersons,
    AddOrgs,
    UpdateOrgs,
    DeleteOrgs,
  } from '/@/api/demo/system';

  import { useModal } from '/@/components/Modal';
  import DeptModal from './DeptModal.vue';
  import PersonAdjustModal from '/@/views/components/PersonAdjustModal.vue';

  import { columns, searchFormSchema } from './dept.data';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { proxy }: any = getCurrentInstance();
  const { t } = useI18n();
  const { createMessage } = useMessage();
  const depData = ref<any>([]);
  const selectedDepKey = ref<string>('rtEnterprise');

  onMounted(async () => {
    await getTreeData();
  });

  const getTreeData = () => {
    GetAllOrgTreeDataHaveCompany('清软英泰').then((res) => {
      depData.value = res;
    });
  };

  const rightClick = (node) => {
    const arr = [
      {
        label: t('common.create'),
        handler: () => {
          openModal(true, {
            isUpdate: false,
            parentOrgId: node.eventKey,
          });
        },
      },
      {
        label: t('common.edit'),
        handler: () => {
          openModal(true, {
            isUpdate: true,
            parentOrgId: node.eventKey,
          });
        },
      },
      {
        label: t('common.delete'),
        handler: () => {
          DeleteOrgs(node.eventKey).then(() => {
            createMessage.success(t('common.delSuccessText'));
            getTreeData();
          });
        },
      },
      {
        label: t('routes.table.departmentManagement.adjustPerson'),
        handler: () => {
          openPersonAdjustModal(true, {
            orgId: node.eventKey,
            belongType: '部门',
          });
        },
      },
    ];
    return arr;
  };

  function handleSuccess({ isUpdate, values }) {
    if (isUpdate) {
      UpdateOrgs(values)
        .then(() => {
          createMessage.success(t('common.updateSuccessText'));
        })
        .then(() => {
          getTreeData();
        });
    } else {
      AddOrgs(values)
        .then(() => {
          createMessage.success(t('common.saveSuccess'));
        })
        .then(() => {
          getTreeData();
        });
    }
  }

  const selectDep = (selectedKeys) => {
    selectedDepKey.value = selectedKeys[0];
    reload();
  };

  const [registerModal, { openModal }] = useModal();
  const [registerPersonAdjustModal, { openModal: openPersonAdjustModal }] = useModal();
  const [registerTable, { reload }] = useTable({
    // title: t('routes.table.departmentManagement.departmentMembers'),
    titleHelpMessage: 'DeptIndex',
    api: GetOrgPersons,
    beforeFetch: () => {
      return selectedDepKey.value;
    },
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    pagination: false,
    striped: false,
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    canResize: false,
  });
</script>
